<template>
  <header
    class="gk-header mainColor"
    :class="{ 'is-fixed': h.fixed}"
    v-if="hasTitle">
    <div class="gk-header-button is-left">
        <a href="javascript:history.back();">
            <div class="left-arrow"></div>
        </a> 
    </div>
    <h1 class="gk-header-title">{{h.title}}</h1>
    <slot name="right"></slot>
  </header>
</template>

<script>
export default {
    props: ['h'],
    data() {
        return {
            hasTitle: true
        }
    },
    created() {
    //    if (sessionStorage.getItem('resdata')) {
    //        let resdata = JSON.parse(sessionStorage.getItem('resdata'))
    //        this.hasTitle = resdata.Title == '1' ? true : false
    //    } 
    }
}
</script>

<style lang="scss" scoped>
$mainColor: #1D4482;
$secondary: #eee;
@function rem($n) {
  @return ($n/40)+rem;
}
.gk-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: $mainColor;
    box-sizing: border-box;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2.2rem;
    line-height: rem(88);
    padding: 0 10px;
    position: relative;
    text-align: center;
    white-space: nowrap;

    &.secondary {
        background-color: $secondary;
        color: #333;

        .left-arrow {
            &:before {
                border-color: #333 !important;
            }
        }
    }

    .gk-header-button {
        -webkit-box-flex: .5;
        -ms-flex: .5;
        flex: .5;
        height: rem(88);

        &.is-left {

            .left-arrow {
                position: absolute;
                width: 1.28rem;
                height: 1.28rem;
                top: 0.425rem;
                left: 0.425rem;
                
                &:before {
                content: "";
                position: absolute;
                width: 0.511rem;
                height: 0.511rem;
                border: 1px solid #fff;
                border-width: 2px 0 0 2px;
                -webkit-transform: rotate(315deg);
                transform: rotate(315deg);
                top: 0.34rem;
                left: 0.425rem;
                }
            }
        }

        &.is-right {
            
            .right-arrow {
                position: absolute;
                right: 0.625rem;
                font-size: 0.75rem;
            }
            
        }

        a {
            display: block;
            width: rem(88);
            height: rem(88);
            color: #fff;
        }
    }

}
</style>

